import Icon from '@/components/Icon'
import { StyledMediaContainer } from '@/style/global'
import styled from 'styled-components'

/**包裹框*/
export const Wrap = styled(StyledMediaContainer)`
	min-height: 500px;
	height: calc(100vh - 54px - 47px - 42px - 105px);
	box-sizing: border-box;

	.auto {
		height: 100%;
		border-bottom: 2px solid #949799;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow: scroll;
		.card_nav_title {
			line-height: 1.5;
			text-align: left;
			font-size: 14px;
			color: #545454;
			box-sizing: content-box;
			padding: 0;
			margin: 18px 0 10px;
			position: relative;
			height: 30px;
			line-height: 30px;
			margin-bottom: 0;
			.node_btn {
				line-height: 30px;
				box-sizing: content-box;
				margin: 0;
				padding: 0;
				cursor: pointer;
				text-decoration: none;
				color: #4e4e4e;
				height: 20px;
				position: relative;
				display: inline-block;
				top: 7px;
				width: 14px;
				margin-right: 5px;
			}
			.see_all_meeting {
				line-height: 30px;
				box-sizing: content-box;
				margin: 0;
				padding: 0;
				cursor: pointer;
				text-decoration: none;
				margin-left: 10px;
				color: #1e94da;
				border-bottom: 1px solid #1e94da;
			}
		}
		.no_meeting {
			text-align: center;
			margin-top: 195px;
			font-size: 14px;
			text-align: center;
			color: #b6b6b6;
		}
	}
`
export const CardListWrap = styled.div`
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	& > div {
		width: calc(50% - 40px);
		margin-right: 35px;
		margin-left: 5px;
	}
	& > div:first-child {
		border-top: 1px #ccc dashed;
	}
	& > div:nth-child(2) {
		border-top: 1px #ccc dashed;
	}
`
export const StyledWrap = styled(StyledMediaContainer)`
	.btn {
		padding: 14px 0;
		justify-content: flex-end;
	}
	.empty-msg {
		padding-top: 215px;
		color: rgb(182, 182, 182);
		font-size: 15px;
	}
`
export const StyledMeetingConveneModal = styled.div`
	width: 100%;
	height: 100%;
	padding: 30px 50px;
	.line {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		.label {
			width: 83px;
		}
		.unit {
			padding: 0 5px;
		}
		&.manual {
			padding-left: 83px;
		}
	}
`
export const StyledContainer = styled.div`
	.operate-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		margin-top: 5px;
		.search-bar {
			display: flex;
			align-items: center;
			.operator-input,
			.name-input,
			.operational-input {
				margin-right: 50px;
			}
			.search-btn {
				margin-left: 20px;
				margin-right: 10px;
			}
			.total-msg {
				color: #4e4e4e;
				font-size: 12px;
				.reset {
					color: #007ac0;
					cursor: pointer;
					margin-left: 9px;
					text-decoration: underline;
				}
			}
		}
	}
`
export const SearchIcon = styled(Icon)`
	background-position: 0 -305px;
	width: 30px;
	height: 30px;
	&:active,
	&:hover {
		background-position: -30px -305px;
	}
`
export const ExpansionIcon = styled(Icon)`
	background-position: 0px -1083px;
	width: 14px;
	height: 20px;
	margin-right: 5px;
`
export const NotExpansionIcon = styled(Icon)`
	background-position: -56px -1083px;
	width: 14px;
	height: 20px;
	margin-right: 5px;
`
